<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="列表管理" name="first">
      <div style="margin-right:2%;text-align:right;">
        <div style="position: relative;display: inline-block;margin: 3px;" v-if="isAuth('citys:shezhidaili')">
          <span>省份:</span>
          <el-select v-model="parentId" style="width:150px;margin-left: 10px;" @change="handleChange()">
            <el-option v-for="item in citys" :key="item.id" :label="item.cityName" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="position: relative;display: inline-block;margin: 3px;" v-if="isAuth('citys:shezhidaili')">
          <span>代理城市:</span>
          <el-select v-model="cityId" style="width:150px;margin-left: 10px;" :disabled="parentId==''" @change="animeDat1()">
            <el-option v-for="item in citys2" :key="item.id" :label="item.cityName" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">刷新
        </el-button>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans">重置
        </el-button>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="selectAdd(0)">添加
        </el-button>
      </div>
      <el-table v-loading="tableDataLoading" :data="tableData.records"  row-key="areaId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column fixed prop="areaId" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="cityName" label="代理城市" v-if="isAuth('citys:shezhidaili')"></el-table-column>
        <el-table-column prop="province" label="省" >
        </el-table-column>
        <el-table-column prop="city" label="市" >
        </el-table-column>
        <el-table-column prop="district" label="区" >
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="250">
        </el-table-column>
        <el-table-column prop="baseMoney" label="一口价">
        </el-table-column>
        <el-table-column prop="points" label="区域经纬度" width="200">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <div
                style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
                slot="reference">
                <div v-for="(item,index) in scope.row.points" :key="index">纬度：{{item.lat}} 经度：{{item.lng}}</div>
              </div>
              <div style="width: 400px;height: auto;word-break: break-all;max-height: 500px;overflow: auto">
                <div v-for="(item,index) in scope.row.points" :key="index">纬度：{{item.lat}} 经度：{{item.lng}}</div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column prop="isEnable" label="状态" width="160">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnable" @change="changeT(scope.row)" :active-value="openValue"
              :inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
            <span v-if="scope.row.isEnable==1" style="color: #13ce66;">启用</span>
            <span v-else style="color: #ff4949;">不启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="isEnable" label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button style="margin:5px;" size="mini" type="primary" icon="document"
              @click="selectAdd(scope.row.areaId,scope.row)" plain v-if="scope.row.parentId==0">添加二级
            </el-button>
            <el-button style="margin:5px;" size="mini" type="primary" icon="document"
              @click="selectAdd(-2,scope.row)">修改
            </el-button>
            <el-button style="margin:5px;" size="mini" type="warning" icon="document"
              @click="selectDel(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;float:right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
          layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-tab-pane>

    <el-dialog title="二级区域列表" :visible.sync="dialogFormVisible" width="80%" center>
      <div style="margin-right:2%;text-align:right;">
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">刷新
        </el-button>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="selectAdd(ids,datasYi)">添加
        </el-button>
      </div>
      <el-table v-loading="tableDataLoadingEr" :data="tableDataEr.records">
        <el-table-column fixed prop="areaId" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="cityName" label="代理城市" v-if="isAuth('citys:shezhidaili')"></el-table-column>
        <el-table-column prop="province" label="省" >
        </el-table-column>
        <el-table-column prop="city" label="市" >
        </el-table-column>
        <el-table-column prop="district" label="区" >
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="250">
        </el-table-column>

        <el-table-column prop="baseMoney" label="一口价" >
        </el-table-column>
        <el-table-column prop="points" label="区域经纬度" width="250">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <div
                style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
                slot="reference">
                <div v-for="(item,index) in scope.row.points" :key="index">纬度：{{item.lat}} 经度：{{item.lng}}</div>
              </div>
              <div style="width: 400px;height: auto;word-break: break-all;max-height: 500px;overflow: auto">
                <div v-for="(item,index) in scope.row.points" :key="index">纬度：{{item.lat}} 经度：{{item.lng}}</div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column prop="isEnable" label="状态" width="160">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnable" @change="changeT(scope.row)" :active-value="openValue"
              :inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
            <span v-if="scope.row.isEnable==1" style="color: #13ce66;">启用</span>
            <span v-else style="color: #ff4949;">不启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="isEnable" label="操作" width="160">
          <template slot-scope="scope">
            <el-button style="margin-left:5px;" size="mini" type="primary" icon="document"
              @click="selectAdd(-1,scope.row)">修改
            </el-button>
            <el-button style="margin-left:5px;" size="mini" type="warning" icon="document"
              @click="selectDel(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination @size-change="handleSizeChangeEr" @current-change="handleCurrentChangeEr"
          :page-sizes="[10, 20, 30, 40]" :page-size="limitEr" :current-page="pageEr"
          layout="total,sizes, prev, pager, next,jumper" :total="tableDataEr.total">
        </el-pagination>
      </div>
    </el-dialog>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        openValue: 1,
        closeValue: 0,
        page: 1,
        limit: 10,
        pageEr: 1,
        limitEr: 10,
        classify: 1,
        indentNumber: '',
        imageUrl: '',
        url: '',
        complaintState: '',
        activeName: 'first',
        tableDataLoading: true,
        tableDataLoadingEr: true,
        dialogFormVisible: false,
        dialogFormVisible2: false,
        tableData: {},
        tableDataEr:{},
        checkBoxData: [], //多选框选择的值
        statesnum: [{
            label: '全部',
            value: ''
          },
          {
            label: '可申诉',
            value: 1
          },
          {
            label: '申诉中',
            value: 2
          },
          {
            label: '申诉未通过',
            value: 3
          },
          {
            label: '申诉通过',
            value: 4
          },
          {
            label: '待审核',
            value: 5
          },
          {
            label: '投诉未通过',
            value: 6
          },
        ],
        content: '',
        status: 1,
        helpTakeId: '',
        indentNumbers: '',
        complaintId: '',
        message: '',
        title: '',
        type: 3,
        form: {
          id: '',
          illegal: '',
          forfeitMoney: '',
        },
        formLabelWidth: '200px',
        dialogFormVisible1: false,
        guangaoData: {},
        illegal: '',
        illegalId: '',
        forfeitMoney: '',
        illegalList: [],
        parentId: '',
        citys: [],
        citys2: [],
        cityId:'',
        ids:'',
        datasYi:{},
      }
    },
    methods: {
      // 多选
      changeFun(val) {
        this.checkBoxData = val
      },
      //处理默认选中当前日期
      // getNowTime () {
      // 	var now = new Date()
      // 	var year = now.getFullYear() //得到年份
      // 	var month = now.getMonth() //得到月份
      // 	var date = now.getDate() //得到日期
      // 	var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
      // 	var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
      // 	var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
      // 	month = month + 1
      // 	month = month.toString().padStart(2, '0')
      // 	date = date.toString().padStart(2, '0')
      // 	var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
      // 	return defaultDate
      // 	this.$set(this.info, 'stockDate', defaultDate)
      // },
      // tabs切换
      handleClick(tab, event) {
        if (tab._props.label == '列表管理') {
          this.page = 1
          this.limit = 10
          this.dataSelect()
        }

      },
      handleSizeChange(val) {
        this.limit = val
        this.dataSelect()
      },
      handleCurrentChange(val) {
        this.page = val
        this.dataSelect()
      },
      // 添加
      selectAdd(parentId,row) {
        if (row) {
          this.$router.push({
            path: '/riderSchedulingFw',
            query: {
              parentId:parentId,
              contexts: JSON.stringify(row),

            }
          })
        } else {
          this.$router.push({
            path: '/riderSchedulingFw',
            query: {
              parentId:parentId
            }
          })
        }

      },
      // 查询资源列表
      select() {
        this.page = 1
        this.limit = 10
        this.dataSelect()
      },
      // 重置资源列表
      cleans() {
        this.cityId = ''
        this.parentId = ''
        this.page = 1
        this.dataSelect()
      },
      // select选择事件
      animeDat(state) {
        this.page = 1
        this.complaintState = state
        console.log(state)
        this.dataSelect()
      },
      animeDat1(state) {
        this.page = 1
        this.illegalId = state
        this.dataSelect()
      },


      // 获取数据列表
      dataSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/banArea/getBanAreaTreeList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'remarks': '',
            'cityId': this.cityId,
            // 'parentId':0
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.tableDataLoading = false
            if(data.data.records.length>0){
              for (var i in data.data.records) {
                  data.data.records[i].children = data.data.records[i].childrenList
              }
            }
            let returnData = data.data
            this.tableData = returnData
          }
        })
      },
      // 详情跳转
      updates(userId) {

        this.$router.push({
          path: '/userDetail',
          query: {
            userId: userId
          }
        })
      },
      // 处理
      classdelete(row) {
        this.$confirm(`确定处理该求助?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('message/auditMessage'),
            method: 'post',
            params: this.$http.adornParams({
              'ids': row.id,
              'status': 1,
              'auditContent': '',
            })
          }).then(({
            data
          }) => {
            if (data.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            } else {
              this.$message({
                message: data.msg,
                type: 'warning',
                duration: 1500,
                onClose: () => {}
              })
            }

          })
        }).catch(() => {})
      },
      // 删除
      selectDel(row) {
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('admin/banArea/deleteArea'),
            method: 'get',
            params: this.$http.adornParams({
              'areaId': row.areaId
            })
          }).then(({
            data
          }) => {
            if (data.code == 0) {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            } else {
              this.$notify({
                title: '提示',
                duration: 1800,
                message: data.msg,
                type: 'warning'
              })
            }
          })
        }).catch(() => {})
      },
      // 是否启用
      changeT(row) {
        this.$http({
         url: this.$http.adornUrl('admin/banArea/updateAreaStatus'),
         method: 'get',
		 params: this.$http.adornParams({
         // data: this.$http.adornData({
           'areaId': row.areaId,
         })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          } else {
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          }

        })
      },
      // 获取城市省份列表
      dataSelectCity() {
        this.$http({
          url: this.$http.adornUrl('admin/cityInfo/getCityInfoList'),
          method: 'get',
          params: this.$http.adornParams({
            'parentId': 0,
            'cityName': '',
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            let returnData = data.data;
            this.citys = returnData.records
          }

        })
      },
      // 获取城市
      dataSelectCity2() {
        this.$http({
          url: this.$http.adornUrl('admin/cityInfo/getCityInfoList'),
          method: 'get',
          params: this.$http.adornParams({
            'parentId': this.parentId,
            'cityName': '',
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.citys2 = data.data.records
          }

        })
      },
      handleChange() {
        this.cityId = ''
        this.dataSelectCity2()
      },
      // 二级弹框
      selectErBtn(row){
        this.datasYi = row
        this.pageEr = 1
        this.ids = row.areaId
        this.dataSelectEr()
        this.dialogFormVisible = true

      },
      // 获取数据列表
      dataSelectEr() {
        this.tableDataLoadingEr = true
        this.$http({
          url: this.$http.adornUrl('admin/banArea/getBanAreaTreeList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageEr,
            'limit': this.limitEr,
            'remarks': '',
            'cityId': '',
            // 'parentId':this.ids
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.tableDataLoadingEr = false
            let returnData = data.data
            this.tableDataEr = returnData
          }
        })
      },
      handleSizeChangeEr(val) {
        this.limitEr = val
        this.dataSelectEr()
      },
      handleCurrentChangeEr(val) {
        this.pageEr = val
        this.dataSelectEr()
      },
    },
    mounted() {
      this.parentId = ''
      this.dataSelect()
      this.dataSelectCity()
    }
  }
</script>

<style>
  .customWidth {
    width: 80% !important;
  }
</style>
